<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	em{
		font-style: normal;
	}
	.grid_button{
		width: 100%;
		height: 55px;
	}
	.button_win{
		padding: 10px;
		width: 200px;
		/*border: 1px solid red;*/
		float: right;
	}
	.grid_card{
		/*border: 1px solid #D8E3EF;*/
		/*padding: 10px;*/
		box-sizing: border-box;
	}
	.grid_list{
		
	}
	.grid_card{
		display: none;
	}
	.grid_card ul{
		font-size: 0;
	}
	.grid_card ul li{
		width: 280px;
		/*height: 100px;*/
		float: left;
		border: solid 1px #e3e8ee;
		padding: 10px;
		box-sizing: border-box;
		margin: 10px;
		border-radius: 5px;
		transition: all .15s ease-in-out;
	}
	.grid_card ul li:hover{
		box-shadow: 0 1px 6px rgba(0,0,0,.2);
    	border-color: #eee;
	}
	.grid_card ul li .head_portrait{
		width: 120px;
		height: 100%;
		/*border: 1px solid black;*/
		float: left;
		margin-right: 10px;
		/*background: url(../../libs/images/demo/head_portrait.png) no-repeat center center;*/
	}
	.grid_card ul li .head_portrait img{
		display: block;
		width: 97%;
		/*height: 100px;*/
		margin-top: 5px;
	}
	.grid_card ul li span{
		color: #657180;
		font-size: 12px;
		display: block;
		line-height: 25px;
	}
	.grid_card ul li p{
		display: block;
		color: #657180;
		font-size: 14px;
		line-height: 25px;
	}
	.grid_card ul li .tip_win{
		float: left;
		/*width: 130px;*/
	}
</style>
</head>
<body>
	<div class="page_content">
		<div class="grid_button">
			<div class="button_win">
				<div class="buttonGroup" style="width: 160px;">
					<span class="leftButton icon_list active">列表</span>
					<span class="rightButton icon_card">卡片</span>
				</div>
			</div>
		</div>
		<div class="grid_list">
			<div id="maingrid"></div>
		</div>
		
		<div class="grid_card">
    		<ul class="clearfloat">
    			<!--<li>
    				<div class="head_portrait">
    				<img src="" alt="" />
    				</div>
    				<span>姓名：<em>员工</em></span>
    				<span>性别：<em>女</em></span>
    				<span>部门：<em>部门1</em></span>
    				<span>学历：<em>硕士毕业</em></span>
    			</li>-->
    		</ul>
    	</div>
    </div>
   
	<script type="text/javascript">
        var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":1},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":2},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":2},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":3},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":4},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":6},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":3},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5},

      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工13","deptId":9,"ability":2},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工14","deptId":8,"ability":3},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工15","deptId":7,"ability":4},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工16","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工17","deptId":6,"ability":6},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工18","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工19","deptId":6,"ability":3},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工20","deptId":6,"ability":1},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门21","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":1},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工22","deptId":11,"ability":2},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工23","deptId":9,"ability":2},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工24","deptId":8,"ability":3},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工25","deptId":7,"ability":4},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工26","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工27","deptId":6,"ability":6},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工28","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工29","deptId":6,"ability":3},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工30","deptId":6,"ability":1},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工31","deptId":6,"ability":5},
      {"head_icon":"../../libs/images/demo/Head-portrait.png","title":"电气化工程","deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工32","deptId":6,"ability":5}
      ]}
       
       //数据表格使用
        var g;
		function initComplete(){
			 g = $("#maingrid").quiGrid({
                columns: [ 
	                { display: '姓名', name: 'name', align: 'center',  width: "20%"},
	                { display: '专业', name: 'title', align: 'center',  width: "20%"},
	                { display: '性别', name: 'sex', align: 'center' , width: "20%"},
	                { display: '部门', name: 'deptName',  align: 'center' , width: "20%"},
	                { display: '学历', name: 'degree',  align: 'center', width: "20%" },
                  { display: '操作', isAllowHide: false, align: 'left', width: 180,
                        render: function (rowdata, rowindex, value, column){
                        return '<div class="grid_opp_container">'
                                   + '<span class="grid_opp_view" onclick="onView(' + rowdata.id + ')">查看</span>'
                                   + '<span class="grid_opp_edit" onclick="onEdit(' + rowdata.id + ')">修改</span>' 
                                   + '<span class="grid_opp_delete" onclick="onDelete(' + rowdata.id+','+rowindex + ')">删除</span>'
                               + '</div>';
                     }
                }
                ], data:testData, pageSize: 20, rownumbers:true, checkbox:true,percentWidthMode:true,
                height: '100%', width:"100%"
            });

			var html='';
			for(var i=0;i<testData.rows.length;i++){
				html+='<li>';
    			html+='<div class="head_portrait"><img src="'+testData.rows[i].head_icon+'" alt="" /></div>';
    			html+='<div class="tip_win">';
    			html+='<p>'+testData.rows[i].title+'</p>';
    			html+='<span>姓名：<em>'+testData.rows[i].name+'</em></span>';
    			html+='<span>性别：<em>'+testData.rows[i].sex+'</em></span>';
    			html+='<span>部门：<em>'+testData.rows[i].deptName+'</em></span>';
    			html+='<span>学历：<em>'+testData.rows[i].degree+'</em></span>';
    			html+='</div>';
    			html+='</li>';
			}
			$(".grid_card ul").empty().append(html);
		}
    function onView(rowid){
      top.Toast("showNoticeToast", "选择的记录Id是:" + rowid );
    }
    
    function onEdit(rowid){
      top.Toast("showNoticeToast", "修改的记录Id是:" + rowid );
      // for (var record in g.records){
      //   if(g.records[record]['id']==rowid){
      //     top.Toast("showNoticeToast", JSON.stringify(g.records[record]));
      //   }
      // }
    }
    
    function onDelete(rowid,rowidx){
      top.Toast("showNoticeToast", "删除的记录Id是:" + rowid );
    };
    $(".leftButton").click(function(){
    	$(this).addClass("active").siblings(".rightButton").removeClass("active");
    	$(".grid_list").show().siblings(".grid_card").hide();
    	g.resetWidth();
    });
    $(".rightButton").click(function(){
    	$(this).addClass("active").siblings(".leftButton").removeClass("active");
    	$(".grid_card").show().siblings(".grid_list").hide();
    	g.resetWidth();
    })
    </script>	
</body>
</html>